<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <title>Position - ESUI Demo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/google-code-prettify/prettify.css" />
    <link rel="stylesheet" href="assets/themes/standard.css" />
    <!--[if lt IE 9]>
    <link rel="stylesheet" href="assets/ie8.css" />
    <![endif]-->
</head>
<body>
    <div class="header">
        <h1 id="branding">ESUI - Behavior Position</h1>
    </div>
    <div class="ui-g main-container">
        <div id="side-bar" class="ui-u-1-5">
            <ul id="navigator" class="ui-nav">
            </ul>
        </div>
        <div id="main" class="ui-u-4-5">
            <h2>Position</h2>
            <p>Position</p>
            <div class="example">
                <div id="parent" style="border:1px solid #000;width:500px;height:80px;margin:0 auto">
                    <p>
                    This is the position parent element.
                    </p>
                </div>
                <div class="positionable" id="positionable1" style="width:75px;height:75px;position:absolute;display:block;background:#bcd5e6;text-align:center">
                    <p>
                    to position
                    </p>
                </div>
                <div class="positionable" id="positionable2" style="width:120px;height:40px;position:absolute;display:block;background:#bcd5e6;text-align:center">
                    <p>
                    to position 2
                    </p>
                </div>
                <div style="padding: 20px; margin-top: 75px;">
                    position
                    <div style="padding-bottom: 20px;">
                        <b>my:</b>
                        <select id="my-horizontal">
                            <option value="left">left</option>
                            <option value="center">center</option>
                            <option value="right">right</option>
                        </select>
                        <select id="my-vertical">
                            <option value="top">top</option>
                            <option value="center">center</option>
                            <option value="bottom">bottom</option>
                        </select>
                    </div>
                    <div style="padding-bottom: 20px;">
                        <b>at:</b>
                        <select id="at-horizontal">
                            <option value="left">left</option>
                            <option value="center">center</option>
                            <option value="right">right</option>
                        </select>
                        <select id="at-vertical">
                            <option value="top">top</option>
                            <option value="center">center</option>
                            <option value="bottom">bottom</option>
                        </select>
                    </div>
                    <div style="padding-bottom: 20px;">
                        <b>collision:</b>
                        <select id="collision-horizontal">
                            <option value="flip">flip</option>
                            <option value="fit">fit</option>
                            <option value="flipfit">flipfit</option>
                            <option value="none">none</option>
                        </select>
                        <select id="collision-vertical">
                            <option value="flip">flip</option>
                            <option value="fit">fit</option>
                            <option value="flipfit">flipfit</option>
                            <option value="none">none</option>
                        </select>
                    </div>
                </div>
            </div>
            <script type="text/sample" data-refid="main-js">
            </script>
        </div>
    </div>
    <script src="assets/loader/esl.js"></script>
    <script src="config.js"></script>
    <script src="demo.js"></script>
    <script src="assets/google-code-prettify/prettify.js"></script>
    <script id="main-js">
    require(
        [
            'jquery',
            'esui',
            'esui/behavior/position',
            'esui/behavior/Draggable',
            'esui/Tab',
            'demo'
        ],
        function ($, esui) {
            esui.init()
            function setPosition() {
                $('.positionable').position({
                    of: $('#parent'),
                    my: $('#my-horizontal').val() + ' ' + $('#my-vertical').val(),
                    at: $('#at-horizontal').val() + ' ' + $('#at-vertical').val(),
                    collision: $('#collision-horizontal').val() + ' ' + $('#collision-vertical').val()
                });
            }

            $('.positionable').css('opacity', 0.5);
            $('select, input').bind('click keyup change', setPosition);
            $('#parent').draggable({
                drag: setPosition
            });
            setPosition();
        }
    );
    </script>
    <script src="sitemap.js"></script>
</body>
</html>
